<template>
    <el-form ref="activityFormRef" :model="activity" style="margin: auto;" :rules="activityRules">
        <el-form-item label="活动名称" prop="name">
            <el-input type="text" v-model="activity.name" placeholder="请输入活动名称"/>
        </el-form-item>
        <div class="datetime-picker">
            <el-form-item label="活动时间" prop="activityTime">
                <el-date-picker
                    v-model="activity.activityTime"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    data-format="YYYY-MM-DD"
                    time-format="HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>
        </div>
        <el-form-item label="活动预算" prop="cost">
            <el-input type="text" v-model="activity.cost" placeholder="请输入活动预算"/>
        </el-form-item>
        <el-form-item label="活动描述" prop="description">
            <el-input type="textarea" v-model="activity.description" placeholder="请输入活动描述"/>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="userSubmit()">提 交</el-button>
    <el-button type="primary" plain @click="goBack">返 回</el-button>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {doPost, doPut, doGet} from '../http/httpRequest';
import {showMessage} from '../util/message'

// 活动数据对象 - 用于存储活动表单数据
// 初始化为空对象以避免模板渲染时出现undefined错误
let activity = ref({});

// 路由实例 - 用于页面导航和参数获取
const router = useRouter();

// 表单验证规则 - 定义各字段的验证逻辑
let activityRules = ref({
    // 活动名称验证规则
    name: [
        {required: true, message: '请输入活动名称', trigger: 'blur'},
        {min: 3, max: 30, message: '活动名称必须是3-30个字符', trigger: 'blur'},
    ],
    // 活动时间验证规则
    activityTime: [
        {required: true, message: '请输入活动时间', trigger: 'blur'},
    ],
    // 活动预算验证规则
    cost: [
        {required: true, message: '请输入活动预算', trigger: 'blur'},
        {type: 'number', message: '活动预算必须是数字', trigger: 'blur'},
    ],
    // 活动描述验证规则
    description: [
        {required: true, message: '请输入活动描述', trigger: 'blur'},
    ]
})

// 组件挂载时执行 - 处理编辑场景下的活动数据加载
onMounted(() => {
    // 从路由参数中获取活动ID - 判断是否为编辑模式
    let activityId = useRoute().params.activityId;

    // 如果存在活动ID，则加载对应活动数据
    if (activityId) {
        loadActivity(activityId);
    }
})

// 表单提交处理函数 - 处理新增和编辑活动的提交逻辑
const userSubmit = () => {
    // 处理活动时间数据 - 将数组转换为适合API提交的格式
    let timeArray = [];
    let activityTime = activity.value.activityTime; // 包含开始时间和结束时间的数组
    for (let index in activityTime) {
        timeArray.push(activityTime[index])
    }

    // 创建表单数据对象 - 用于API提交
    let formData = new FormData();
    formData.append('name', activity.value.name)
    formData.append('startTime', timeArray[0])
    formData.append('endTime', timeArray[1])
    formData.append('cost', activity.value.cost)
    formData.append('description', activity.value.description)

    // 根据是否存在activityId判断是新增还是编辑操作
    if (activity.value.activityId > 0) {
        // 编辑操作 - 使用PUT请求更新活动
        doPut('/api/activity', formData).then(resp => {
            if (resp.data.code == 200) {
                showMessage(resp.data.msg, 'success'); // 提交成功提示
                router.push('/dashboard/activity'); // 跳转到活动列表页面
            } else {
                showMessage(resp.data.msg, 'error'); // 提交失败提示
            }
        })
    } else {
        // 新增操作 - 使用POST请求创建活动
        doPost('/api/activity', formData).then(resp => {
            if (resp.data.code == 200) {
                showMessage(resp.data.msg, 'success'); // 提交成功提示
                router.push('/dashboard/activity'); // 跳转到活动列表页面
            } else {
                showMessage(resp.data.msg, 'error'); // 提交失败提示
            }
        })
    }
}

// 加载活动详情函数 - 根据活动ID从API获取活动数据并填充表单
const loadActivity = id => {
    doGet('/api/activity/' + id, {}).then(resp => {
        if (resp) {
            if (resp.data.code == 200) {
                // 将获取的活动数据赋值给响应式对象
                activity.value = resp.data.info
                // 格式化活动时间为数组形式，适配时间选择器组件
                activity.value.activityTime = [resp.data.info.startTime, resp.data.info.endTime]
            } else {
                showMessage(resp.data.msg, 'error');
            }
        }
    })
}

// 返回上一页函数 - 导航回之前的页面
const goBack = () => {
    router.back();
}
</script>

<style scoped>
.el-input {
    width: 225px !important; /* 增加宽度百分比，使所有输入框宽度一致 */
}

.el-select {
    width: 225px !important;
}

.datetime-picker {
    width: 540px !important;
}

.el-textarea {
    width: 225px !important;
}
</style>